<template>
    <div class="cont p-b-70">
        <nav-bar title="数据报表" rightImg="https://h5.dhcc.wang/newprogram/wxRobot/nav_refresh_black.png" :bgStyle="bgStyle"
            text-color="#333333" :rotate.sync="reload" @leftClick="back" @rightClick="refresh" />
        <div class="tabs">
            <van-tabs v-model:active="tabActive1" background="rgba(0,0,0,0)" line-width="20" title-active-color="#000"
                color="#000" @change="tabActive1Change">
                <van-tab title="发单数据"></van-tab>
                <van-tab title="业绩预估"></van-tab>
            </van-tabs>
        </div>
        <div v-if="tabActive1 == 0">
            <div class="m-l-10 m-r-10 bg-white radius8 p-10 m-t-10 p-t-20">
                <div class="text-bold font-15 m-l-10 m-t-10"><van-icon name="bar-chart-o" style="top: 2px" class="m-r-5"/>基础数据</div>
                <div class="flex justify-around align-center m-t-10 p-b-10 p-t-5">
                    <div class="text-center">
                        <div class="color-9 font-13">发单群数量</div>
                        <div class="m-t-5 text-bold numberFont font-18">{{storedTotalGroupCount}}</div>
                    </div>
                    <div class="lines"></div>
                    <div class="text-center">
                        <div class="color-9 font-13">群成员人数</div>
                        <div class="m-t-5 text-bold numberFont font-18">{{storedTotalMemberCount}}</div>
                    </div>
                </div>
            </div>
            <div class="m-l-10 m-r-10 bg-white radius8 p-10 m-t-10 p-t-20">
                <div class="text-bold font-15 m-l-10 m-t-10"><van-icon name="bar-chart-o" style="top: 2px" class="m-r-5"/>今日概况<span class="color-9 font-11 m-l-10 text-normal">数据统计更新时间粒度5分钟</span></div>
                <div class="flex justify-around align-center m-t-10 p-b-10 p-t-5">
                    <div class="text-center">
                        <div class="color-9 font-13">发送群消息</div>
                        <div class="m-t-5 text-bold numberFont font-18">{{overview.today_send_msg}}</div>
                    </div>
                    <div class="lines"></div>
                    <div class="text-center">
                        <div class="color-9 font-13">发送朋友圈</div>
                        <div class="m-t-5 text-bold numberFont font-18">{{overview.today_send_sns}}</div>
                    </div>
                    <div class="lines"></div>
                    <div class="text-center">
                        <div class="color-9 font-13">发送商品数</div>
                        <div class="m-t-5 text-bold numberFont font-18">{{overview.today_send_goods}}</div>
                    </div>
                </div>
            </div>
            <div class="m-l-10 m-r-10 bg-white radius8 p-10 m-t-10">
                <div class="text-bold font-15 m-l-10 m-t-10"><van-icon name="bar-chart-o" style="top: 2px" class="m-r-5"/>昨日概况</div>
                <div class="flex justify-around align-center m-t-10 p-b-10 p-t-5">
                    <div class="text-center">
                        <div class="color-9 font-13">发送群消息</div>
                        <div class="m-t-5 text-bold numberFont font-18">{{overview.yesterday_send_msg}}</div>
                    </div>
                    <div class="lines"></div>
                    <div class="text-center">
                        <div class="color-9 font-13">发送朋友圈</div>
                        <div class="m-t-5 text-bold numberFont font-18">{{overview.yesterday_send_sns}}</div>
                    </div>
                    <div class="lines"></div>
                    <div class="text-center">
                        <div class="color-9 font-13">发送商品数</div>
                        <div class="m-t-5 text-bold numberFont font-18">{{overview.yesterday_send_goods}}</div>
                    </div>
                </div>
            </div>
            <div class="m-l-10 m-r-10 bg-white radius8 p-10 m-t-10">
                <div class="text-bold font-15 m-l-10 m-t-10"><van-icon name="bar-chart-o" style="top: 2px" class="m-r-5"/>本月概况</div>
                <div class="flex justify-around align-center m-t-10 p-b-10 p-t-5">
                    <div class="text-center">
                        <div class="color-9 font-13">发送群消息</div>
                        <div class="m-t-5 text-bold numberFont font-18">{{overview.this_month_send_msg}}</div>
                    </div>
                    <div class="lines"></div>
                    <div class="text-center">
                        <div class="color-9 font-13">发送朋友圈</div>
                        <div class="m-t-5 text-bold numberFont font-18">{{overview.this_month_send_sns}}</div>
                    </div>
                    <div class="lines"></div>
                    <div class="text-center">
                        <div class="color-9 font-13">发送商品数</div>
                        <div class="m-t-5 text-bold numberFont font-18">{{overview.this_month_send_goods}}</div>
                    </div>
                </div>
            </div>
            <div class="m-l-10 m-r-10 bg-white radius8 p-10 m-t-10">
                <div class="text-bold font-15 m-l-10 m-t-10"><van-icon name="bar-chart-o" style="top: 2px" class="m-r-5"/>上月概况</div>
                <div class="flex justify-around align-center m-t-10 p-b-10 p-t-5">
                    <div class="text-center">
                        <div class="color-9 font-13">发送群消息</div>
                        <div class="m-t-5 text-bold numberFont font-18">{{overview.last_month_send_msg}}</div>
                    </div>
                    <div class="lines"></div>
                    <div class="text-center">
                        <div class="color-9 font-13">发送朋友圈</div>
                        <div class="m-t-5 text-bold numberFont font-18">{{overview.last_month_send_sns}}</div>
                    </div>
                    <div class="lines"></div>
                    <div class="text-center">
                        <div class="color-9 font-13">发送商品数</div>
                        <div class="m-t-5 text-bold numberFont font-18">{{overview.last_month_send_goods}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="orderTab" v-else>
            <div class="empty color-c text-center m-t-50">
                <img src="https://img.huajuanyun.com/utools/2023/129/1702131812657.png" width="70%">
                <div class="empty-text font-14 m-t-10">开发中~敬请期待</div>
            </div>
            <!-- <van-tabs v-model:active="tabActive2" background="rgba(0,0,0,0)" line-width="0" title-active-color="#000"
                color="#000">
                <van-tab title="今日概况"></van-tab>
                <van-tab title="昨日概况"></van-tab>
                <van-tab title="本月概况"></van-tab>
                <van-tab title="上月概况"></van-tab>
            </van-tabs>
            <div class="m-l-10 m-r-10 bg-white radius8 p-10">
                <div class="flex justify-around align-center m-t-10 p-b-10">
                    <div class="text-center">
                        <div class="color-9 font-13">总付款笔数</div>
                        <div class="m-t-5 text-bold numberFont font-18">-</div>
                    </div>
                    <div class="lines"></div>
                    <div class="text-center">
                        <div class="color-9 font-13">总付款金额</div>
                        <div class="m-t-5 text-bold numberFont font-18">-</div>
                    </div>
                    <div class="lines"></div>
                    <div class="text-center">
                        <div class="color-9 font-13">总预估佣金</div>
                        <div class="m-t-5 text-bold numberFont font-18">-</div>
                    </div>
                </div>
            </div>
            <div class="m-l-10 m-r-10 bg-white radius8 m-t-10 p-b-10">
                <van-row class="p-t-10 p-b-10 b-b m-l-5 m-r-5">
                    <van-col class="text-center" span="5">渠道</van-col>
                    <van-col class="text-center" span="6">总付款笔数</van-col>
                    <van-col class="text-center" span="6">总付款金额</van-col>
                    <van-col class="text-center" span="6">总预估佣金</van-col>
                </van-row>
                <van-row class="p-t-10 p-b-10 b-b m-l-5 m-r-5 p-r-5 font-12">
                    <van-col class="text-center" span="5">淘宝</van-col>
                    <van-col class="text-center" span="6">-</van-col>
                    <van-col class="text-center" span="6">-</van-col>
                    <van-col class="text-center" span="6">-</van-col>
                    <van-col span="1"><van-icon name="arrow" color="#999" /></van-col>
                </van-row>
                <van-row class="p-t-10 p-b-10 bg-grey m-l-5 m-r-5 p-r-5 font-12">
                    <van-col class="text-center" span="5">京东</van-col>
                    <van-col class="text-center" span="6">-</van-col>
                    <van-col class="text-center" span="6">-</van-col>
                    <van-col class="text-center" span="6">-</van-col>
                    <van-col span="1"><van-icon name="arrow" color="#999" /></van-col>
                </van-row>
                <van-row class="p-t-10 p-b-10 b-b m-l-5 m-r-5 p-r-5 font-12">
                    <van-col class="text-center" span="5">拼多多</van-col>
                    <van-col class="text-center" span="6">-</van-col>
                    <van-col class="text-center" span="6">-</van-col>
                    <van-col class="text-center" span="6">-</van-col>
                    <van-col span="1"><van-icon name="arrow" color="#999" /></van-col>
                </van-row>
                <van-row class="p-t-10 p-b-10 bg-grey m-l-5 m-r-5 p-r-5 font-12">
                    <van-col class="text-center" span="5">抖音</van-col>
                    <van-col class="text-center" span="6">-</van-col>
                    <van-col class="text-center" span="6">-</van-col>
                    <van-col class="text-center" span="6">-</van-col>
                    <van-col span="1"><van-icon name="arrow" color="#999" /></van-col>
                </van-row>
                <van-row class="p-t-10 p-b-10 b-b m-l-5 m-r-5 p-r-5 font-12">
                    <van-col class="text-center" span="5">唯品会</van-col>
                    <van-col class="text-center" span="6">-</van-col>
                    <van-col class="text-center" span="6">-</van-col>
                    <van-col class="text-center" span="6">-</van-col>
                    <van-col span="1"><van-icon name="arrow" color="#999" /></van-col>
                </van-row>
            </div> -->
        </div>
    </div>
</template>

<script>
import { Tab, Tabs, Col, Row } from 'vant'
export default {
    components: {
        [Tabs.name]: Tabs,
        [Tab.name]: Tab,
        [Col.name]: Col,
        [Row.name]: Row

    },
    data () {
        return {
            bgStyle: '#fff',
            reload: true,
            loading: true,
            tabActive1: 0,
            tabActive2: 0,
            overview:{},
            storedTotalMemberCount: 0,
            storedTotalGroupCount: 0
        }
    },
    mounted() {
        this.config = this.$DB.get('robotCfg')
        this.bgBtnStyle = `linear-gradient(90deg, ${this.config.mac_main_color} 0%, ${this.config.mac_assist_color} 100%)`
        this.storedTotalMemberCount = localStorage.getItem('totalMemberCount')
        this.storedTotalGroupCount = localStorage.getItem('totalGroupCount')
        this.init()
        this.setHeader()
    },
    methods: {
        init () {
            this.$api.memberTongjiData({}, true).then(async res => {
                if (res.code != 1) {
                    return this.$toast(res.msg)
                }
                this.overview = res.data.overview
            }).finally(() => {
                setTimeout(() => {
                    this.reload = false
                }, 500)
            })
        },
        tabActive1Change (e) {
            this.tabActive1 = e
            if (e == 0) {
                this.init()
            }
        },
        tabActive2Change (e) {
            this.tabActive2 = e
        },
        refresh () {
            this.reload = true
            this.init()
        },
        openPage (url, item = {}) {
            this.$router.push({
                path: url,
                query: item
            })
        },
        back () {
            this.$router.go(-1)
        },
        setHeader () {
            this.$common.setHeader({
                native_headershow: 0,
                topstyle: 'topcolor',
                native_top_words_color: '#ffffff',
                str_link_color: '#ffffff',
                end_link_color: '#ffffff'
            })
        }
    }
}
</script>
<style lang="less" scoped>
.cont {
    font-size: 14px;
    padding-top: 46px;

    .tabs {
        width: 50vw;
        margin: 10px auto 0;
    }

    ::v-deep .van-tab--active {
        font-size: 16px;
        font-weight: bold;
    }

    .lines {
        width: 1px;
        height: 20px;
        background-color: #e5e5e5;
    }
    .orderTab {
       .van-tabs {
            margin: 5px 10px;
            ::v-deep .van-tab {
                border: 1px solid #dddddd;
                border-radius: 100px;
                font-size: 12px;
                font-weight: normal;
                margin: 0 5px;
            }
            ::v-deep .van-tabs__nav--line {
                margin-top: 10px;
                padding-bottom: 0;
                height: 60%;
            }
            ::v-deep .van-tab--active {
                background: #222222;
                color: #ffffff!important;
            }
        }
    }
}</style>